<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>..::Home::..</title>
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<script src="js/jquery-2.0.3.min.js" type="text/javascript"></script>
	
	<script type="text/javascript" src="js/jssor-slider/js/jssor.core.js"></script>
    <script type="text/javascript" src="js/jssor-slider/js/jssor.utils.js"></script>
    <script type="text/javascript" src="js/jssor-slider/js/jssor.slider.js"></script>
	<script type="text/javascript" src="js/tabs_nav.js"></script>
</head>
<body>
	<div id="wrapper-header">
            <div class="wrapper" >
				<div id="logo">
					<img src="images/ui/logo.png" alt="hmobile"/>
					<ul>
						<li><a href="#" tilte="" >Home page</a></li>
						<li><a href="#" tilte="" >About</a></li>
						<li><a href="#" tilte="" >Contact</a></li>
						<li><a href="#" tilte="" >news</a></li>
						
					</u>
				</div>
				<div id="box-user">
					<div id="card">
						<h3>Giỏ hàng <span>0</span> sản phẩm</h3>
					</div>
					<div id="login-panel">
						<a href="#" title="đăng nhập" >Login</a>
						<a href="#" title="đăng kí" > Register </a>
					</div>
				</div>
				<div class="clearb"></div>
			</div>  
	</div>
	<div id="wrapper-section">
		<!-- navigation -->
		<div id="navigation">
			<div class="wrapper">
				<ul class="clearfix">
					<li>
						<a href="#" tilte="" >Sản phẩm</a>
						<ul>
							<li><a href="#" title="">Apple</a></li>
							<li><a href="#" title="">Samsung</a></li>
							<li><a href="#" title="">HTC</a></li>
							<li><a href="#" title="">LG</a></li>
							<li><a href="#" title="">Nokia</a></li>
							<li><a href="#" title="">Blackberry</a></li>
						</ul>
					</li>
					<li><a href="#" tilte="" >Phụ kiện</a></li>
					<li><a href="#" tilte="" >Bảo hành</a></li>
					<li><a href="#" tilte="" >Khuyến mãi</a></li>
				</ul>
			</div>
		</div>
		<div class="wrapper">		
			<!-- silder -->
			<div id="slider">
					<script>
					/* 	if($(window).width() > 1200){
							$("#navigation ul li ul").css("display","block");
							
						}else{
							$("#navigation ul li ul").css("display","none");
						}
						$(window).resize(function(){
							if($(window).width() > 1200){
								$("#navigation ul li ul").css("display","block");
							}else{
								$("#navigation ul li ul").css("display","none");
							}
						}); */
					</script>
					 <script>

						jQuery(document).ready(function ($) {
						
							var options = {
								$DragOrientation: 3,                                //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)

								$BulletNavigatorOptions: {                                //[Optional] Options to specify and enable navigator or not
									$Class: $JssorBulletNavigator$,                       //[Required] Class to create navigator instance
									$ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
									$ActionMode: 1,                                 //[Optional] 0 None, 1 act by click, 2 act by mouse hover, 3 both, default value is 1
									$AutoCenter: 1,                                 //[Optional] Auto center navigator in parent container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
									$Steps: 1,                                      //[Optional] Steps to go for each navigation request, default value is 1
									$Lanes: 1,                                      //[Optional] Specify lanes to arrange items, default value is 1
									$SpacingX: 0,                                   //[Optional] Horizontal space between each item in pixel, default value is 0
									$SpacingY: 0,                                   //[Optional] Vertical space between each item in pixel, default value is 0
									$Orientation: 1,                                 //[Optional] The orientation of the navigator, 1 horizontal, 2 vertical, default value is 1
							
								},
								$AutoPlay: true,                                    //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
								$AutoPlayInterval: 1500,                            //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000

							};
							var jssor_slider1 = new $JssorSlider$("slider1_container", options);
						});
					</script>
					<!-- Jssor Slider Begin -->
					<!-- You can move inline styles (except 'top', 'left', 'width' and 'height') to css file or css block. -->
					<div id="slider1_container" style="position: relative; top: 0px; left: 0; width: 1000px;
						height: 300px; display: inline-block;">

						<!-- Loading Screen -->
						<div u="loading" style="position: absolute; top: 0px; left: 0;">
							<div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
								background-color: #000000; top: 0px; left: 0px;width: 100%;height:100%;">
							</div>
							<div style="position: absolute; display: block; background: url(js/jssor-slider/loading.gif) no-repeat center center;
								top: 0px; left: 0px;width: 100%;height:100%;">
							</div>
						</div>

						<!-- Slides Container -->
						<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 1000px; height: 300px;
							overflow: hidden;">
							<div><a href="#"><img u="image" src="images/ui/quangcao.png" /></a></div>
							<div><a href="#"><img u="image" src="images/ui/logo.png" /></a></div>
							<div><a href="#"><img u="image" src="images/ui/quangcao.png" /></a></div>
							<div><a href="#"><img u="image" src="images/ui/quangcao.png" /></a></div>
						</div>
						
						<!-- Bullet Navigator Skin Begin -->
						<style>
							/* jssor slider bullet navigator skin 03 css */
							/*
							.jssorb03 div           (normal)
							.jssorb03 div:hover     (normal mouseover)
							.jssorb03 .av           (active)
							.jssorb03 .av:hover     (active mouseover)
							.jssorb03 .dn           (mousedown)
							*/
							.jssorb03 div, .jssorb03 div:hover, .jssorb03 .av
							{
								background: url(js/jssor-slider/img/b03.png) no-repeat;
								overflow:hidden;
								cursor: pointer;
							}
							.jssorb03 div { background-position: -5px -4px; }
							.jssorb03 div:hover, .jssorb03 .av:hover { background-position: -35px -4px; }
							.jssorb03 .av { background-position: -65px -4px; }
							.jssorb03 .dn, .jssorb03 .dn:hover { background-position: -95px -4px; }
						</style>
						<!-- bullet navigator container -->
						<div u="navigator" class="jssorb03" style="position: absolute; bottom: 4px; left: 6px;">
							<!-- bullet navigator item prototype -->
							<div u="prototype" style="position: absolute; width: 21px; height: 21px; text-align:center; line-height:21px; color:white; font-size:12px;"><NumberTemplate></NumberTemplate></div>
						</div>
						<!-- Bullet Navigator Skin End -->
						<a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
					</div>
					<!-- Jssor Slider End -->
					<div class="clearb"></div>
			</div>
			
			<!-- search box -->
			<div id="search-box" class="clearfix">						
					<form id="frm-search">
						<h3 class="title"> Tìm kiếm </h3>	
						<input type="text" value="Nhập từ khóa" name="keyword" id="frm-search-keyword" />
						<script>
							/*
								js auto show text in tag input
							*/							
							$(document).ready(function(){
								var valueDefault = document.getElementById("frm-search-keyword").value;
								$("#frm-search-keyword").focus(function(){	
									var keyword = $(this).val();
									if(keyword==valueDefault){
										document.getElementById("frm-search-keyword").value = ""; 
										keyword="";
									}
								});
								$("#frm-search-keyword").blur(function(){
									var keyword = $(this).val();
									if(keyword.trim()==""){
										document.getElementById("frm-search-keyword").value=valueDefault;
									}
								});
								
								//submit
								$("#images-submit").click(function(){
									var keyword = document.getElementById("frm-search-keyword").value;
									if(keyword==valueDefault){
										document.getElementById("frm-search-keyword").value = ""; 
									}									
									$("#frm-search").submit();
								});
							})
						
						</script>
						
						<select name="category">
							<option value="0">Chọn hãng sản xuất</option>
						</select>
						
						<select name="from-price">
							<option value="0">Chọn hãng sản xuất</option>
						</select>
						
						<select name="to-price">
							<option value="0">Chọn hãng sản xuất</option>
						</select>
						
						<span id="images-submit">&nbsp;</span>
					</form>
				
			</div>
			
			<!-- main-contain -->
			<div id="main-contain" class="clearfix">
				<!-- left -->
				<div id="left-wrap">
					<div id="left-column">
						<div class="block">
							<h3 class="title">Sản phẩm đã chọn</h3>
							<div class="card">
								<form action="projecta.local" method="post" id="frm-card">
									<table>
										<tr>
											<td>
												Xóa
											</td>
											<td>
												Tên sản phẩm
											</td>
											<td>
												Số lượng	
											</td>
											<td>
												Đơn giá
											</td>
											<td>
												Thành tiền
											</td>
										</tr>
										<tr>
											<td>
												<a href="#" title="xóa"><span>&nbsp;xóa</span></a>
											</td>
											<td>
												<a href="#">samsung galaxy s4</a>
											</td>
											<td>
												<input type="text" value="1" name="qty" />		
											</td>
											<td>
												15.000.000 vnd
											</td>
											<td>
												15.000.000 vnd
											</td>
										</tr>
										<tr>
											<td colspan="5" id="total-price">
												Thành tiền: 15.000.000 vnd
											</td>
										</tr>
									</table>
									<div class="card-controller">
										<a href="#">Mua tiếp</a>											
										<a href="#">Hủy</a>										
										<a href="#" id="submit-frm-card">Cập nhật</a>
										<a href="#">Đặt hàng</a>
									</div>
									<script>
										$(document).ready(function(){
											$("#submit-frm-card").click(function(){
												$("#frm-card").submit();
												return false;
											});
										})
									</script>
								</form>
								
							</div>
							<!-- End card -->
						</div>
					</div>
					<!-- End left column -->
				</div><!-- End div wrap -->
				
				<!-- right -->
				<div id="right-column">
					<!-- Giới Thiệu  -->
					<div class="block-right">
						<h3>Giới thiệu</h3>
						<div class="box-image">
							<a href="#" > <img src="images/ui/blackberry-qc.jpg" ></a>
						</div>
						
						<div class="box-image">
							<a href="#" > <img src="images/ui/blackberry-qc.jpg" ></a>
						</div>
					</div>
					
					<!-- Tin tức -->
					<div class="block-right">
						<h3>Tin tức</h3>
						<ul>
							<li><a href="#">Blackberry Z10 giảm giá sốc</a></li>
							<li><a href="#">Blackberry Z10 giảm giá sốc</a></li>
							<li><a href="#">Blackberry Z10 giảm giá sốc</a></li>
							<li><a href="#">Blackberry Z10 giảm giá sốc</a></li>
							<li><a href="#">Blackberry Z10 giảm giá sốc</a></li>
						</ul>
					</div>
				</div>
				<!-- End right -->
				
			</div>
			
			<!-- End main contain -->
		</div>
		
		<!-- End wrapper -->		
	</div>
	<!-- End section -->
	
	<!-- Footer -->
	<div id="wrapper-footer">
		<div class="wrapper">
			<div id="logo">
				<img src="images/ui/logo.png" title="Homepage" alt="Hmobile" />
			</div>
			<div id="footer-content">
				<p>
					Địa chỉ: 160 cao lỗ, Quận 8 , TP. HCM</p>
				
				<p>
					Điện Thoại: 0128 327 6658</p>
				
				<p>
					Email: trandinhhoanghac@gmail.com</p>
				
			</div>
			<div class="clearb"></div>
		</div>
		
	</div>
	<!-- End footer -->
</body>
</html>